<template>
  <div>
    <el-row type="flex" justify="center">
      <el-card style="width: 500px">
        <el-form label-position="left" label-width="100px">
          <el-form-item>请填写注册信息：</el-form-item>
          <el-form-item label="用户名:">
            <el-input placeholder="输入用户名" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码 :">
            <el-input placeholder="输入密码" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input placeholder="填写邮箱地址" v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="注册按钮:">
            <el-button type="primary" @click="submitRegister()">开启装B之旅</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { register } from "../api";

export default {
  name: "register",
  data() {
    return {
      user: {
        username: "",
        password: "",
        email: ""
      }
    };
  },
  methods: {
    //注册
    submitRegister() {
      register(this.user).then(result => {
        // this.$message.error("")
        if (result.data.code == 501) {
          this.$message.error("该用户名已经被占用");
        }
        if (result.data.code == 200) {
          this.$message.success("注册完成");
          this.$router.push("/login");
        }
        console.log(result);
      });
    }
  }
};
</script>

<style scoped>
.el-button {
  width: 98%;
}
</style>
